<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>闪电下单设置</title>
		<script src="../static/js/base.js"></script>
	</head>
	<style type="text/css">
		.top{
		    height: 50px;
		    line-height: 50px;
		    background-color: #424242;
		    text-align: center;
		}
		.set_type{
			padding: 10px 15px;
			box-sizing: border-box;
			background-color: #393939;
		    margin-bottom: 1px;
		    
		}
		.left_arrow{
            width: 23px;
            height: 25px;
            top: 13px;
            left: 15px;
            background-size: 50%;
            position: absolute;
            background-image: url(../static/img/arrow_left.png);
            z-index: 100;
        }
		.choose_type {
            outline: none;
            border: none;
            background-color: #393939;
            color: #efefef;
            font-family: arial,"microsoft yahei";
            padding: 0px;
        }
        .count_btn{
            width: 15%;
            border: 1px solid #424242;
            box-sizing: border-box;
        }
        .choosetype{
        	background-color: #e1b080;
        }
        .foc_choose{
            width: 20px;
            height: 20px;
            border: 1px solid #999999;
            margin-bottom: -5px;
            margin-right: 6px;
        }
        .focu{
		    background-color: #e1b080;
		}
		.set_po{
	        padding: 10px 0px;
    		border-bottom: 1px solid #424242;
    		box-sizing: border-box;
		}
		.point_con {
		    width: 30px;
		    height: 30px;
		    border: 1px solid #EFEFEF;
		    border-radius: 2px;
		}
		.po_input {
		    width: 100%;
		    height: 100%;
		    box-sizing: border-box;
		    text-align: center;
		    color: #efefef;
		    background-color: #393939;
		}
		.point_btn {
		    width: 30px;
		    height: 30px;
		    line-height: 30px;
		    border: 1px solid #EFEFEF;
		    border-radius: 2px;
		    background-color: #e1b080;
		}
		.que_icon {
		    margin: 0 10px 10px;
		    height: 15px;
		    line-height: 15px;
		    width: 15px;
		    /*border: 1px solid #999999;*/
		    border-radius: 12px;
		}
		.set_poo {
		    width: 30px;
		    height: 18px;
		}
		.point_input {
		    width: 100%;
		    height: 100%;
		    box-sizing: border-box;
		    text-align: left;
		    color: #efefef;
		    border-bottom: 1px solid #999999;
		    background-color: #393939;
		}
		.pt15{
			padding-top: 15px;
		}
	</style>
	<body ms-controller="wm">
		<div class="top"><span class="left_arrow bgBox"></span>闪电下单设置</div>
		<div class="set_type mt10 color999">设置品种
			<select class="choose_type fr">
				<option value="volvo">小恒指</option>
				<option value="saab">美原油</option>
				<option value="opel">德指</option>
			</select>
		</div>
		<div class="set_type">
			<div class="order_count hidden">
				<div class="w30 fl color999">交易数量</div>
				<div class="w70 fl hidden tc color999">
					<div class="count_btn ml10 fr" ms-class-choosetype="Type==1" ms-click="ChooseType(1)">10手</div>
					<div class="count_btn ml10 fr" ms-class-choosetype="Type==2" ms-click="ChooseType(2)">5手</div>
					<div class="count_btn ml10 fr" ms-class-choosetype="Type==3" ms-click="ChooseType(3)">3手</div>
					<div class="count_btn ml10 fr" ms-class-choosetype="Type==4" ms-click="ChooseType(4)">2手</div>
					<div class="count_btn fr" ms-class-choosetype="Type==5" ms-click="ChooseType(5)">1手</div>
				</div>
			</div>
		</div>
		<div class="set_type">
			<span class="foc_choose inline_block" ms-class-focu="isfocu" ms-click="ChooseFocu"></span>
			<span class="inline_block mr20 color999">触发止盈</span>
			<span class="foc_choose inline_block" ms-class-focu="isfoc" ms-click="ChooseFoc"></span>
			<span class="inline_block color999">不触发止盈</span>
			<div class="set_po f10 hidden">
				<div class="fl">
					<span class="point_con inline_block tc">
						<input class="po_input" type="number" maxlength="" placeholder="--" ms-duplex-string="points"/>
					</span>
					<span class="point_text inline_block tc color999">点</span>
					<span class="point_text inline_block tc color999">(--)</span>
					<span class="point_text inline_block tc color999">触发止盈</span>
				</div>
				<span class="point_btn inline_block tc fr ml10" ms-click="addpoints">+</span>
				<span class="point_btn inline_block tc fr" ms-click="subpoints">-</span>
				
			</div>
			<div class="set_po f10 hidden">
				<div class="fl">
					<span class="point_con inline_block tc">
						<input class="po_input" type="number" maxlength="" placeholder="--" ms-duplex-string="point"/>
					</span>
					<span class="point_text inline_block tc color999">点</span>
					<span class="point_text inline_block tc color999">(--)</span>
					<span class="point_text inline_block tc color999">触发止盈</span>
				</div>
				<span class="point_btn inline_block tc fr ml10" ms-click="addpoint">+</span>
				<span class="point_btn inline_block tc fr" ms-click="subpoint">-</span>
				
			</div>
		</div>
		<div class="set_type pt15">
			<span class="foc_choose inline_block" ms-class-focu="isbaob" ms-click="ChooseBao"></span>
			<span class="inline_block color999">移动保本</span>
			<div style="float: right;">
			<span class="inline_block color999">移动点数</span>
			<span class="set_poo inline_block mr10 color999">
				<input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
			</span>
			<span class="inline_block color999">保本点数</span>
			<span class="set_poo inline_block color999">
				<input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
			</span>
			</div>
		</div>
		<div class="btnBox mt30">
			<div class="bgcolor_ora color_ef br5 tc">确定</div>
		</div>
	</body>
	<script type="text/javascript">
		var o;
		avalon.ready(function(){
			o = avalon.define({
				$id:"wm",
				Type:-1,
				isfoc:false,
				isfocu:false,
				isbaob:false,
				points:0,
				point:0,
		        ChooseFocu:function(){
		        	o.isfocu = !o.isfocu;
		        },
		        ChooseFoc:function(){
		        	o.isfoc = !o.isfoc;
		        },
		        ChooseBao:function(){
		        	o.isbaob = !o.isbaob;
		        },
				ChooseType:function(tabId){
		            o.Type=tabId;
		        },
		        addpoint:function(){
		    		o.point+=1;
		        },
		        subpoint:function(){
		        	if(o.point<1){
		        		return;
		        	}else{
		        		o.point-=1;
		        	}
		    		
		        },
		        addpoints:function(){
		    		o.points+=1;
		        },
		        subpoints:function(){
		        	if(o.points<1){
		        		return;
		        	}else{
		        		o.points-=1;
		        	}
		    		
		        }
			});
			avalon.scan(document.body);
		})
	</script>
</html>
